<template>
    <div style="margin: 20px">
        <el-card>
            <div style="margin-bottom: 10px; display: flex">
                <el-input class="w-50 m-2" style="width: 150px" placeholder="请输入关键词" v-model="form.keywords" />
                <el-button style="margin-left: 10px" type="primary" @click="get">关键词搜索</el-button>
            </div>
            <el-table :data="state.tableData" :border="true" highlight-current-row>
                <el-table-column sortable prop="id" label="ID" width="65" />
                <el-table-column sortable prop="name" label="数据名称" width="150" />
                <el-table-column prop="description" label="数据描述" />
              <el-table-column sortable prop="startTime" label="启用时间" width="150" />
              <el-table-column sortable prop="expireTime" label="生效时间" width="150" />
              <el-table-column sortable prop="downloadCount" label="下载次数" width="150" />
              <el-table-column fixed="right" label="操作" width="200">
                    <template v-slot="scope">
                        <el-button link type="primary" size="small" @click="download(scope.row.id)">下载</el-button>
                        <el-button link type="primary" size="small" @click="online(scope.row.id)">浏览</el-button>
                        <el-button link size="small" @click="toEdit(scope.row)">编辑</el-button>
                        <el-popconfirm title="是否确认删除该项？" confirm-button-text="是" cancel-button-text="否"
                            @confirm="doDel(scope.row.id)">
                            <template #reference>
                                <el-button link type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" v-model:current-page="form.current" v-model:page-size="form.size"
                :page-sizes="[10, 20, 50]" :small="false" :disabled="false" :background="true"
                layout="total, sizes, prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>
        <el-dialog v-model="dlgState.visible" title="编辑基础数据" :width="600" @close="clean">
            <el-form :model="dlgState.form" ref="dlg_form" label-position="left"   label-width="95px">
              <el-form-item label="数据名称：" prop="name" required>
                <el-input v-model="dlgState.form.name" placeholder="例：所得税税率"></el-input>
              </el-form-item>
              <el-form-item label="数据描述：" prop="description">
                <el-input v-model="dlgState.form.description" type="textarea" :rows="3"></el-input>
              </el-form-item>
              <el-form-item label="启用时间" prop="startTime" required>
                <el-input v-model="dlgState.form.startTime" placeholder="例：2001/01/01"/>
              </el-form-item>
              <el-form-item label="失效时间" prop="expireTime" required>
                <el-input v-model="dlgState.form.expireTime" placeholder="例：2001/01/01"/>
              </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAdd">返回</el-button>
                    <el-button type="primary" @click="doAdd" v-if="dlgState.isAdd">
                        新增
                    </el-button>
                    <el-button type="primary" @click="doEdit" v-else> 保存 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import router from "@/router";
import basisApi from "@/api/basis/basis";
import basisDict from "@/api/basis/dict";

declare global {
    interface Date {
        Format(fmt: string): string;
    }
}

// 时间日期格式化
Date.prototype.Format = function (fmt: string) {
    // author: meizz
    var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        S: this.getMilliseconds(), // 毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
    for (let k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
            );
    return fmt;
};


const fileList = ref([]);

// type definition
type project = {
    id: number;
    name: string;
    createTime: Date;
    description: string;
};

// tableData
const form = reactive({
    current: 1,
    keywords: "",
    project_type: 1,
    size: 10,
});
const state = reactive({
    total: 0,
    tableData: [] as Array<project>,
});
const handleSizeChange = (val: number) => {
    form.size = val;
    get();
};
const handleCurrentChange = (val: number) => {
    form.current = val;
    get();
};
const get = () => {
    basisApi.get(form).then((res) => {
        if (res.data.code === 200) {
            state.tableData = res.data.data.records;
            state.total = res.data.data.total;
        }
    });
};
// 对话框
const dlg_form = ref();
const dlgState = reactive({
    visible: false,
    isAdd: true,
    form: {
        description: "",
        name: "",
        uploadTime: new Date(),
        uploadUser: "",
        value: 0,
        startTime: "",
        expireTime: "",
    },
});
const toAdd = () => {
    dlgState.isAdd = true;
    dlgState.visible = true;
};
const cancelAdd = () => {
    dlgState.visible = false;
};
const doAdd = () => {
    basisApi
        .add({
            description: dlgState.form.description,
            name: dlgState.form.name,
            uploadUser: dlgState.form.uploadUser,
            startTime: dlgState.form.startTime,
            expireTime:dlgState.form.expireTime,
            value: dlgState.form.value,
        })
        .then((res) => {
          if (res.status === 200) {
            if (res.data.code == "500"){
              ElMessage.error(res.data.message);
            }else{
              ElMessage.success("操作成功");
              get();
            }
            dlgState.visible = false;
          }
        });
};
const clean = () => {
    dlgState.form = {

        description: "",
        name: "",
        uploadTime: new Date(),
        uploadUser: "",
        value: 0,
        startTime: "",
        expireTime: "",
    };
};
const download = (id: number) => {
  window.open(`http://localhost:8001/basedata/download/${id}`);
  get()
}

const online = (id: number) => {
  window.open(`http://localhost:8001/basedata/online/${id}`);
  get()
}
const toEdit = (row: any) => {
    dlgState.form = row;
    dlgState.isAdd = false;
    dlgState.visible = true;
  console.log(row)
};
const doEdit = () => {
    basisApi.update({
      id: dlgState.form.id,
      description: dlgState.form.description,
      name: dlgState.form.name,
      uploadUser: dlgState.form.uploadUser,
      startTime: dlgState.form.startTime,
      expireTime:dlgState.form.expireTime,
      value: dlgState.form.value,
    }).then((res) => {
        console.log(res);
      if (res.status === 200) {
        if (res.data.code == "500"){
          ElMessage.error(res.data.message);
        }else{
          ElMessage.success("操作成功");
          get();
        }
        dlgState.visible = false;
      }
    });
};

// 项目删除
const doDel = (id: number) => {
    basisApi.del(id).then((res) => {
        if (res.status === 200) {
            ElMessage.success("删除成功");
            get();
        }
    });
};
// 项目编辑
const editForm = reactive({
    form: {
        name: "",
        description: "",
        value: 0
    },
});

// 文件上传
/* const handleChnage = (file: any, fileList: any) => {
  dlgState.form.file = file.raw;
}; */

onMounted(() => {
    get();
});
</script>
<style lang="scss" scoped>
.tabs>.el-tabs__content {
    width: 100%;
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.tabs {
    margin: 20px;
}
</style>
<!-- 蚌埠 -->